import React, { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { LovePeopleWrapper, ContentWrapper } from './style'
import {formatImg} from '@/utils/format'
export default memo(function LovePeople() {
  const { lovePeoples } = useSelector(state => ({
    lovePeoples:state.getIn(['playlist','lovePeoples'])
  }),shallowEqual)
  return (
    <LovePeopleWrapper>
      <h3 className="title">喜欢这个歌单的人</h3>
      <ContentWrapper>
      {
        lovePeoples.map(item => {
          return (
            <div key={item.userId} className='item'>
              <img src={formatImg(item.avatarUrl,40)} alt="" />
            </div>
          )
        })
      }
      </ContentWrapper>
     
    </LovePeopleWrapper>
  )
})
